<html>
<head>
<title>View Catalyst Demo</title>
<script language="JavaScript" type="text/javascript" src="core/base.js"></script>
<script language="JavaScript" type="text/javascript" src="core/patterns.js"></script>
<script language="JavaScript" type="text/javascript" src="core/mvc.js"></script>
<script language="JavaScript" type="text/javascript" src="core/controllers.js"></script>
<script language="JavaScript" type="text/javascript" src="core/models.js"></script>
<script language="JavaScript" type="text/javascript" src="core/views.js"></script>
<link href="css/default_theme.css" type="text/css" rel="stylesheet"/>
</head>
<body style="font-family:Arial;font-size:11px;">
<table>
<tr><td>
<span style='font-weight:bold;'>Editable Grid</span>
<span> - Simple grid view based on MVC</span>
<div id = "test">
</div>
</tr></td>
<tr><td>
<span style='font-weight:bold;'>Chart</span>
<span> - Implemented with builder pattern (color builder) and share same model with editable grid</span>
<div id = "test2">
</div>
</tr></td>
<tr><td>
<span style='font-weight:bold;'>Selectable Grid</span>
<span> - Attach two views work together</span>
<div id = "test4">
</div>
</tr></td>
<tr><td>
<div id = "test3">
</div>
</tr></td>
<tr><td>
<div id = "test5" style='display:none'>
</div>
<div id = "test6" style='position:absolute;top:25px;left:750px;'>
	<span style='font-weight:bold;'>Dragable Window</span>
	<span> - Decorate simple grid with scroller and window decorator</span><br>
	<a href='javascript:void(0)'> Click here to open window </a>
</div>
</tr></td>
<tr><td>
<span style='font-weight:bold;'>Tab View</span>
<span> - Aggregate multiple views in tab container</span>
<div id = "test7">
</div>
</tr></td>
<tr><td>
	<span style='font-weight:bold;'>Layout</span>
	<span> - Aggregate views with tree stucture compositer</span>
	<div id='test8'></div>
</td></tr>
<tr><td>
</br></br></br></br>
</tr></td>
</table>
<script>
  /*******************************************
   **  MVC and Design pattern in Javascript
   **  Demo by Alex Li
   *******************************************/
  // Create model - Products
  var products = new DemoModel({
    columns:[
      {name:"id",type:"N",length:2},
      {name:"name",type:"S",length:20},
      {name:"price",type:"N",length:5},
      {name:"qty",type:"N",length:2},
      {name:"category",type:"S",length:10}
    ]
  })
  // Load data into model
  var context = new Object();
  context.data = ProductsData;
  products.Load(context);
  
  // Create model - Customers
  var customers = new DemoModel({
    columns:[
      {name:"id",type:"N",length:2},
      {name:"customer_name",type:"S",length:20},
      {name:"gender",type:"S",length:1},
      {name:"membership_level",type:"S",length:1},
	  {name:"balance",type:"N",length:15}
    ]
  })
  // Load data into model
  var context = new Object();
  context.data = CustomersData
  customers.Load(context);
  
  
  // Create controller for editable grid
  var editable_datagrid_controller = new EditableDatagridController({
  	id:"editable_grid_controller"	
  });
  // Create grid view
  var div = document.getElementById("test");
  var datagrid = new SimpleDatagrid({
    headers:[
      {data_id:"id",width:120,text:"Product ID"},
      {data_id:"name",width:220,text:"Product Description"},
      {data_id:"category",width:160,text:"Category"},
	  {data_id:"qty",width:60,text:"Qty"}
    ],
    container:div,
    width:680,
    controller:editable_datagrid_controller,
	id:'grid'
  });
  datagrid.BindModel(products);
  datagrid.Render();
  
  // Create histogram view
  var div2 = document.getElementById("test2");
  // Create color builder - builder pattern
  var HistogramColorBuilder =  {
	  GetBackgroundColor:function(){
		return "rgb(85, 85, 85)";
	  },
	  
	  GetXAxisColor:function(){
		return "#FFFFFF";
	  },
	  
	  GetYAxisColor:function(){
		return "#FFFFFF";
	  },
	  
	  GetDataColor:function(data){
		var result = "#FFFFFF";
		if (data >= 100) {
			result = "rgb(213,156,250)";	
		} else if (data >= 50) {
			result = "rgb(155,155,251)";
		} else if (data >= 30) {
			result = "rgb(156,250,222)";
		} else if (data >= 20) {
			result = "rgb(215,235,143)";
		} else if (data >= 10) {
			result = "rgb(251,202,128)";
		} else if (data >= 0) {
			result = "rgb(254,124,124)";
		} else if (data < 0) {
			result = "rgb(172,111,213)";
		}
		return result;
	  }
	  
  };
  // Chart View
  var histogram = new Histogram({
    x_data_id:"name",
    y_data_id:"qty",
    height:400,
    container:div2,
    x_text:"Product Name",
    y_text:"Quantity",
    y_max:60,
	colorBuilder:HistogramColorBuilder
  });

  histogram.BindModel(products);
  histogram.Render();
  
  // Create fields set view
  var div3 = document.getElementById("test3");
  var fieldsset = new FieldsSet({
      fields:[
        {data_id:"id",label:"Product Id",type:"div"},
        {data_id:"name",label:"Product Name",type:"input"},
        {data_id:"price",label:"Price",type:"input"},
        {data_id:"qty",label:"Qty",type:"input"},
        {data_id:"category",label:"Category",type:"dropdown",values:["Cloth","Book","Training","Misc"]}
      ],
      width:500,
      height:200,
      container:div3,
	  title: 'Product Details'
      //footer:"<input id='back' type='button' value='Back'/><input id='next' type='button' value='next'/>"
  });
  fieldsset.BindModel(products);
  fieldsset.Render();
  
  // Create controller for selectable grid
  var selectable_datagrid_controller = new SelectableDatagridController({
  	id:"selectable_grid_controller",
	associateFieldSet:fieldsset
  });
  
  // Create grid view and attach fields set view to the grid view
  var div4 = document.getElementById("test4");
  var datagrid2 = new SimpleDatagrid({
    headers:[
      {data_id:"name",width:120,text:"Product Name"}
    ],
    container:div4,
    width:500,
	controller:selectable_datagrid_controller
  });
  datagrid2.BindModel(products);
  datagrid2.Render();
  
  // Create decorators - decorator pattern
  var div5 = document.getElementById("test5");
  var grid = new SimpleDatagrid({
    headers:[
      {data_id:"id",width:120,text:"Product ID"},
      {data_id:"name",width:220,text:"Product Description"},
      {data_id:"category",width:160,text:"Category"}
    ],
    width:600,
	container:div5,
	id:'grid2'
  });
  grid.BindModel(products);
  
  // Decorate Grid with scroll box
  var scrollDecorator = new ScrollFrame({
	view:grid,
	height:100,
	id: 'scroller'
  });
  
  // Decorate Grid with window frame
  var windowDecorator = new WindowFrame({
	view:scrollDecorator,
	X: 650,
	Y: 25,
	id: 'window'
  });
  
  var link = document.getElementById("test6");
  link.onclick = function() {
	windowDecorator.Show();
	link.style.display = 'none';
  }
  // Create event observers - Observer pattern
  
  // Observe close event and prompt confirm dialog, this is another way to UI component event beside the controller way
  windowDecorator.AddObserver("PRE_CLOSE", null, 
								function(context){
									var result = confirm("Are you sure to close the window?");
									context.StopEvent = !result;
								}
							 );
  // Observe close event and prompt confirm dialog, this is another way to UI component event beside the controller way
  windowDecorator.AddObserver("POST_CLOSE", null, 
								function(context){
									link.style.display = '';
								}
							 );
  windowDecorator.Render();
  
  
  // Tab View
  // Tab 1 - Grid View
  var tab1 = new SimpleDatagrid({
    headers:[
      {data_id:"id",width:20,text:"ID"},
      {data_id:"customer_name",width:60,text:"Name"},
      {data_id:"gender",width:70,text:"Gender"},
	  {data_id:"balance",width:70,text:"Balance"}
    ],
    width:480,
	id:'grid3'
  });
  tab1.BindModel(customers);
  // Tab 2 - Field Set View
  var tab2 = new FieldsSet({
      fields:[
        {data_id:"id",label:"Customer Id",type:"div"},
        {data_id:"customer_name",label:"Name",type:"div"},
        {data_id:"gender",label:"Gender",type:"div"},
        {data_id:"membership_level",label:"Membership Level",type:"dropdown",values:["A","B","C"]},
		{data_id:"balance",label:"Balance/Debit",type:"input"}
      ],
      width:500,
      height:160
  });
  tab2.BindModel(customers);
  // Tab 3 - Chart View
  var tab3 = new Histogram({
    x_data_id:"customer_name",
    y_data_id:"balance",
    height:250,
    container:div2,
    x_text:"Customer",
    y_text:"Balance",
	colorBuilder:HistogramColorBuilder
  });
  // Tab 4 - Text View
  tab3.BindModel(customers);
  var tab3Scroller = new ScrollFrame({
	view:tab3,
	height:280,
	width:480 ,
	id: 'scroller2'
  });
  
  // Build Tabs
  var div7 = document.getElementById("test7");
  var tabView = new TabView({
		container:div7,
		tabs : [
				{TabText:'Tab 1', View: tab1, width: 50},
				{TabText:'Tab 2', View: tab2, width: 50},
				{TabText:'Tab 3', View: tab3Scroller, width: 50},
				{TabText:'Tab 4', View: null, width: 50, Html:'Tab View Example '}
			   ],
		width: 530,
		height: 300  
  });
  tabView.Render();
  
  //Layout View
  // Cell 1
  var layout_2 = new FieldsSet({
      fields:[
        {data_id:"id",label:"Customer Id",type:"div"},
        {data_id:"customer_name",label:"Name",type:"div"},
        {data_id:"gender",label:"Gender",type:"div"},
        {data_id:"membership_level",label:"Membership Level",type:"dropdown",values:["A","B","C"]},
		{data_id:"balance",label:"Balance/Debit",type:"input"}
      ],
      width:500,
      height:160
  });
  
  layout_2.BindModel(customers);
  
  var controller = new SelectableDatagridController({
  	id:"controller",
	associateFieldSet:layout_2
  });
  // Cell 2
  var layout_1 = new SimpleDatagrid({
    headers:[
      {data_id:"id",width:20,text:"ID"},
      {data_id:"customer_name",width:60,text:"Name"},
      {data_id:"gender",width:70,text:"Gender"},
	  {data_id:"balance",width:70,text:"Balance"}
    ],
    width:480,
	controller:controller
  });
  layout_1.BindModel(customers);
  // Cell 3
  var layout_3 = new Histogram({
    x_data_id:"customer_name",
    y_data_id:"balance",
    height:350,
    x_text:"Customer",
    y_text:"Balance",
	colorBuilder:HistogramColorBuilder
  });
  layout_3.BindModel(customers);
  var layout_3_Scroller = new ScrollFrame({
	view:layout_3,
	height:360,
	width:480 ,
	id: 'scroller3'
  });
  
  // Build vertical layout
  var div8 = document.getElementById("test8")
  var verticalLayout = new Layout({
	cells:[{view:layout_1},{view:layout_2}],
	showBorder : true
  });
  // Build horizontal layout
  var horizontalLayout = new Layout({
	cells:[{view:verticalLayout},{view:layout_3_Scroller}],
	container:div8,
	showBorder : true,
	layoutStyle : Layout.STYLE_HORIZONTAL
  });
  horizontalLayout.Render();
  
</script>
</body>
</html>
